<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" th:href="@{favicon.ico}">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>
    <link th:href="@{/ruoyi/css/ry-ui.css}" rel="stylesheet"/>
    <link th:href="@{/css/my.css}" rel="stylesheet"/>

    <link th:href="@{/ajax/libs/bootstrap-select/bootstrap-select.min.css}" rel="stylesheet"/>

    <!--页面样式文件-->
    <link rel="stylesheet" th:href="@{/dist/css/main.css}">
    <link rel="stylesheet" th:href="@{/dist/css/media.css}">
    <style>
        mes-list span {
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
</head>
<body class="bd-bg">
<!--右侧主体-->
<div class="standard02-detail">
    <div class="detail02-main">
        <!--基本信息-->
        <div class="top clearfix">
            <div class="left-img"><img th:src="${standard.pic}" alt=""></div>
            <div class="right-mes col-sm-12 col-md-10">
                <div class="mes-top clearfix">
                    <label class="fl">生产阶段：</label>
                    <div class="progressBar">
                        <ul class="progressBar-ul clearfix col-md-8" style="padding: 0;" id="progressBar-ul">
                            <div class="currentStep"></div>
                            <li class="p-item" th:each="ncStage : ${stages}">
                                <div class="itemBg"></div>
                                <div class="itemTxt" th:text="${ncStage.stageName} + ' (' +  ${ncStage.stageDays} + '天)'">整地</div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="mes-list clearfix">
                    <div class="mes-item col-sm-12 col-md-6 col-lg-4"><label>标准名称：</label><span
                            th:text="${standard.standardName}">西红柿-千禧-001</span></div>
                    <div class="mes-item col-sm-12 col-md-6 col-lg-4"><label>作物名称：</label><span
                            th:text="${plan.cropNameCn}">西红柿-千禧-001</span></div>
                    <div class="mes-item col-sm-12 col-md-6 col-lg-4"><label>作物品种：</label><span
                            th:text="${plan.cropVarietiesCn}">西红柿-千禧-001</span></div>
                    <div class="mes-item col-sm-12 col-md-6 col-lg-4"><label>作物类别：</label><span
                            th:text="${plan.cropTypeCn}">西红柿-千禧-001</span></div>
                    <div class="mes-item col-sm-12 col-md-6 col-lg-4"><label>总周期天数：</label><span
                            th:text="${standard.totalCycle}">西红柿-千禧-001</span></div>
                    <div class="mes-item col-sm-12 col-md-6 col-lg-4"><label>开始时间：</label><span
                            th:text="*{#dates.format(plan.planTime, 'yyyy-MM-dd')}">2019-10-10</span></div>
                </div>
            </div>
        </div>
        <!--tab区域-->
        <div class="btm">
            <div class="btm-top">
                <ul id="tabList" class="tabList clearfix">
                    <li class="item active">农事记录</li>
                </ul>
            </div>
            <div class="btm-content">
                <div class="firstTab-content active">
                    <div class="timeBar clearfix">
                        <div class="begin-part">农事起始</div>
                        <div class="end-part">农事结束</div>


                        <div class="timeline" th:class="${(ncStageStat.index) %  2 == 0} ?'timeline':'timeline bottom'"
                             th:each="ncStage : ${stages}">
                            <div class="title" th:if="${(ncStageStat.index) % 2 == 0}">
                                <span class="index" th:text="${ncStageStat.index + 1}">1</span>
                                <span class="time" th:text="${ncStage.stageName}">2019.09.12</span>
                            </div>
                            <div class="stepList">
                                <div class="stepItem" th:each="work:${ncStage.works}" th:if="${(workStat.index) < 2}">
                                    <div class="leftdotted"></div>
                                    <p th:text="${work.workType == '1'?'栽培':'农资'}">栽培</p>
                                    <p th:text="${work.workName}">松土平地</p>
                                </div>
                                <div class="timedotted"></div>
                            </div>
                            <div class="title" th:if="${(ncStageStat.index) %  2 != 0}">
                                <span class="index" th:text="${ncStageStat.index + 1}">1</span>
                                <span class="time" th:text="${ncStage.stageName}">2019.09.12</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:include="include::footer"></div>
<th:block th:include="include :: select2-js"/>
<script th:src="@{/js/bootstrap.min.js}"></script>
<!-- 遮罩层 -->
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script th:src="@{/ruoyi/js/common.js?v=3.4.0}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=3.4.0}"></script>


<script th:inline="javascript">
    $(function () {

        $("#tabList li").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
            var index = $(this).index();
            $(".btm-content .tab-content").eq(index).addClass("active").siblings().removeClass("active");
        });


        // 时间轴颜色
        var topColor = ['#47aa57', '#9bc24d', '#f29140', '#eb4745', '#e32088', '#92398b', '#0090cb', '#fac736', '#ec4846']
        var timeLineAll = 0

        $('.timeline').each(function (index) {
            timeLineAll += $(this).outerWidth()
            var _currentColor = topColor[index % topColor.length]
            console.log(_currentColor)
            $(this).css('color', _currentColor)
            $(this).find('.title').css('background-color', _currentColor)
            $(this).find('.stepList').css('border-color', _currentColor)
            $(this).find('.timedotted').css('border-color', _currentColor)
            $(this).find('.leftdotted').css('background-color', _currentColor)
        })
        $('.timeBar').width(timeLineAll)


        var _liArr = $('#progressBar-ul').children(".p-item")
        var _liWidth = 100 / _liArr.length
        _liArr.each(function (index) {
            if (_liArr.length > 1) {
                if (index == 0) {
                    $(this).find(".itemBg").addClass('first')
                } else if (index == _liArr.length - 1) {
                    $(this).find(".itemBg").addClass('last')
                }
            } else {
                $(this).find(".itemBg").addClass('onlyOne')
            }
            var _bgColor = topColor[index % topColor.length]
            $(this).find(".itemBg").css('background-color', _bgColor)
            $(this).find(".itemTxt").css('color', _bgColor)
            $(this).width(_liWidth + '%')
        })

        /** 生产阶段
         * @type {number}:当前生产阶段1-9步的某一个数字
         * @private
         */
        var _currenttep = 1;
        var stages = [[${stages}]];
        try {
            $(stages).each(function (i, e) {
                if (e.stageStatus == 2) {
                    _currenttep = i + 1;
                }
            });
        } catch (e) {
        }



        var _dis = 0
        _liArr.each(function (index) {
            if (index < _currenttep) {
                _dis += $(this).find('.itemBg').eq(0).width()
            }
        })
        var _dis02 = $('#progressBar-ul').children(".p-item").eq(_currenttep - 1).find('.itemBg').eq(0).width() / 2
        _dis = _dis - _dis02
        $('.currentStep').css({
            'left': _dis,
            'border-top': '15px solid' + topColor[(_currenttep - 1) % topColor.length]
        })


    });
    setTitle("计划详情",true);
</script>
</body>
</html>
